<div class="main-content">

    <!--    <div class="main-container" id="main-box">-->

    <!--    </div>-->
    <div style="height: 50px;">
        <img id="logo" style="height: 50px;" src="image/logo.png" alt="" >
    </div>

    <div class="tab-content" id="main-box">
        <div aria-labelledby="layout-tab" class="tab-pane fade show active" id="layout" role="tabpanel">
            <div class="main-box-phone">
                <div style="display:flex; flex-direction: column; padding: 10px; margin: 10px; border: 1px solid var(--border-color); border-radius: 10px;">
                    <div class="rw_title" style="font-size: 18px; margin-bottom: 10px;">UP STREAM</div>
                    <div class="main-sub-box">
                        <button class="button-50-round" data-locale="module_key_chroma" id="luma-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-50-round" data-locale="module_key_luma" id="chroma-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pip1-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pip2-on-air" param="red">ON
                            AIR
                        </button>
                    </div>
                    <div class="main-sub-box">
                        <button class="button-50-round" data-locale="module_key_chroma" id="luma">LUMA</button>
                        <button class="button-50-round" data-locale="module_key_luma" id="chroma">CHROMA</button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pip1">PIP 1</button>
                        <button class="button-50-round" data-loc50ale="module_key_scene" id="pip2">PIP 2</button>
                    </div>
                </div>
                <div style="display:flex; flex-direction: column; padding: 10px; margin: 10px; border: 1px solid var(--border-color); border-radius: 10px;">
                    <div class="rw_title" style="font-size: 18px; margin-bottom: 10px;">DOWN STREAM</div>
                    <div style="display: flex; justify-content: center;">
                        <button class="button-50-round" data-locale="module_key_scene" id="dsk-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="logo1-on-air" param="red">ON
                            AIR
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="logo2-on-air" param="red">ON
                            AIR
                        </button>
                    </div>
                    <div style="display: flex; justify-content: center;">
                        <button class="button-50-round" data-locale="module_key_scene" id="dsk">DSK</button>
                        <button class="button-50-round" data-locale="module_key_scene" id="logo1">LOGO 1</button>
                        <button class="button-50-round" data-locale="module_key_scene" id="logo2">LOGO 2</button>
                    </div>
                </div>
                <div style="display:flex; flex-direction: column; padding: 10px; margin: 10px 10px 20px;border: 1px solid var(--border-color); border-radius: 10px;">
                    <div class="rw_title" style="font-size: 18px; margin-bottom: 10px;">TRANSITION</div>
                    <div style="display: flex; justify-content: center;">
                        <button class="button-50-round" data-locale="module_key_chroma" id="mix">MIX</button>
                        <button class="button-50-round" data-locale="module_key_luma" id="wipe">WIPE</button>
                        <button class="button-50-round" data-locale="module_key_scene" id="dip">DIP</button>
                    </div>
                    <div style="display: flex; justify-content: center;">
                        <button class="button-50-round" data-locale="module_key_chroma" id="0-5s">0.5S</button>
                        <button class="button-50-round" data-locale="module_key_luma" id="1-0s">1.0S</button>
                        <button class="button-50-round" data-locale="module_key_scene" id="custom">CUSTOM</button>
                    </div>
                    <div class="main-sub-box" style="margin-top: 20px">
                        <button class="button-50-round" data-locale="module_key_chroma" id="pgm-1"
                                param="red">PGM 1
                        </button>
                        <button class="button-50-round" data-locale="module_key_luma" id="pgm-2"
                                param="red">PGM 2
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pgm-3"
                                param="red">PGM 3
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pgm-4"
                                param="red">PGM 4
                        </button>
                    </div>
                    <div class="main-sub-box">
                        <button class="button-50-round" data-locale="module_key_chroma" id="pvw-1"
                                param="green">PVW 1
                        </button>
                        <button class="button-50-round" data-locale="module_key_luma" id="pvw-2"
                                param="green">PVW 2
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pvw-3"
                                param="green">PVW 3
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pvw-4"
                                param="green">PVW 4
                        </button>
                    </div>
                    <div class="main-sub-box">
                        <button class="button-50-round" data-locale="module_key_scene" id="pgm-aux"
                                param="red">PGM-AUX
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pgm-pat"
                                param="red">PGM-PAT
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pvw-aux"
                                param="green">PVW-AUX
                        </button>
                        <button class="button-50-round" data-locale="module_key_scene" id="pvw-pat"
                                param="green">PVW-PAT
                        </button>
                    </div>
                    <div class="main-sub-box" style="margin-top: 20px;">
                        <button class="button-50-round" data-locale="module_key_chroma"
                                id="still">STILL
                        </button>
                        <button class="button-50-round" data-locale="module_key_chroma"
                                id="prev">PREV
                        </button>
                        <button class="button-50-round" data-locale="module_key_chroma"
                                id="grab">GRAB
                        </button>
                        <button class="button-50-round" data-locale="module_key_chroma"
                                id="bkgd">BKGD
                        </button>
                    </div>
                    <div style="display: flex; justify-content: center;">
                        <button class="button-50-round" data-locale="module_key_chroma" id="ftb" param="red" style="width: 31%;">
                            FTB
                        </button>
                        <button class="button-50-round" data-locale="module_key_luma" id="cut" param="red" style="width: 32%;">
                            CUT
                        </button>
                        <button class="button-50-round" data-locale="module_key_luma" id="auto" param="red" style="width: 31%;">
                            AUTO
                        </button>
                    </div>
                </div>
                <div style="display: flex; justify-content: center; height: 50px;">
                </div>
            </div>
        </div>
        <div aria-labelledby="media-tab" class="tab-pane fade" id="media" role="tabpanel">
            <div class="main-box-phone">
                <div style="display: flex; flex-direction: column; justify-content: center; margin-top: 40px;">
                    <div class="main-sub-box">
                        <div style="width: 65%;">
                            <label for="stream-1-server">Server Address</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="stream-1-server-no">1&nbsp;</span>
                                </div>
                                <input class="form-control" id="stream-1-server" type="text">
                            </div>
                        </div>
                        <div style="width: 30%;">
                            <label for="stream-1-key">Stream Key</label>
                            <input class="form-control" id="stream-1-key" type="text">
                        </div>
                    </div>
                    <div class="main-sub-box" style="margin-top: 10px;">
                        <div style="width: 65%;">
                            <label class="sr-only" for="stream-1-server">Server Address</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="stream-2-server-no">2</span>
                                </div>
                                <input class="form-control" id="stream-2-server" type="text">
                            </div>
                        </div>
                        <div style="width: 30%;">
                            <label class="sr-only" for="stream-1-key">Stream Key</label>
                            <input class="form-control" id="stream-2-key" type="text">
                        </div>
                    </div>
                    <div class="main-sub-box" style="margin-top: 10px;">
                        <div style="width: 65%;">
                            <label class="sr-only" for="stream-1-server">Server Address</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="stream-3-server-no">3</span>
                                </div>
                                <input class="form-control" id="stream-3-server" type="text">
                            </div>
                        </div>
                        <div style="width: 30%;">
                            <label class="sr-only" for="stream-1-key">Stream Key</label>
                            <input class="form-control" id="stream-3-key" type="text">
                        </div>
                    </div>
                    <div style="display: flex; justify-content: center; margin-top: 10px;">
                        <button class="button-100-round" data-locale="module_key_chroma" id="stream-2">
                            SAVE
                        </button>
                        <button class="button-100-round" data-locale="module_key_chroma" id="rec">REC</button>
                        <button class="button-100-round" data-locale="module_key_chroma"
                                id="stream">STREAM
                        </button>
                    </div>
                    <div style="display: flex; justify-content: center;">
                        <button class="button-100-round" data-locale="module_key_chroma" id="last"><</button>
                        <button class="button-100-round" data-locale="module_key_luma" id="play">PLAY</button>
                        <button class="button-100-round" data-locale="module_key_scene" id="next">></button>
                    </div>
                    <div style="display: flex; justify-content: center; margin-bottom: 10px;">
                        <button class="button-100-round" id="udisk-space" style="width: 45%;">USB:0G/0G</button>
                        <button class="button-100-round" id="sdcard-space" style="width: 45%;">
                            SD:0G/0G
                        </button>
                    </div>

                    <div>Pull Stream</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" style="padding: 0;">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1">1&nbsp;</span>
                                </div>
                                <input aria-describedby="basic-addon1" aria-label="Username"
                                       class="form-control"
                                       id="pull-stream-1" placeholder="null" type="text">
                            </div>
                        </li>
                        <li class="list-group-item" style="padding: 0;">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon2">2</span>
                                </div>
                                <input aria-describedby="basic-addon2" aria-label="Username"
                                       class="form-control"
                                       id="pull-stream-2" placeholder="null" type="text">
                            </div>
                        </li>
                        <li class="list-group-item" style="padding: 0;">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">3</span>
                                </div>
                                <input aria-describedby="basic-addon3" aria-label="Username"
                                       class="form-control"
                                       id="pull-stream-3" placeholder="null" type="text">
                            </div>
                        </li>
                        <li class="list-group-item" style="padding: 0;">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon4">4</span>
                                </div>
                                <input aria-describedby="basic-addon4" aria-label="Username"
                                       class="form-control"
                                       id="pull-stream-4" placeholder="null" type="text">
                            </div>
                        </li>
                        <li class="list-group-item" style="padding: 0;">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon5">5</span>
                                </div>
                                <input aria-describedby="basic-addon5" aria-label="Username"
                                       class="form-control"
                                       id="pull-stream-5" placeholder="null" type="text">
                            </div>
                        </li>
                        <li class="list-group-item" style="padding: 0;">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon6">6</span>
                                </div>
                                <input aria-describedby="basic-addon6" aria-label="Username"
                                       class="form-control"
                                       id="pull-stream-6" placeholder="null" type="text">
                            </div>
                        </li>
                    </ul>
                    <div style="display: flex; justify-content: center; margin-top: 10px;">
                        <button class="button-100-round" data-locale="module_key_chroma" id="pull-stream-save">
                            SAVE
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div aria-labelledby="system-tab" class="tab-pane fade" id="system" role="tabpanel">
            <div class="main-box-phone">
                <div style="display: flex; flex-direction: column; justify-content: center; margin-top: 60px;">
                    <div>Customized Channels name</div>
                    <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 10px;">
                        <div style="">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item" style="padding: 0;">
                                    <input class="form-control" id="umd_pvw" pattern="[a-zA-Z0-9]{1,6}" placeholder="PVW" style=""
                                           type="text">
                                </li>
                                <li class="list-group-item" style="padding: 0;">
                                    <input class="form-control" id="umd_pgm" placeholder="PGM" style="" type="text">
                                </li>
                                <li class="list-group-item" style="padding: 0;">
                                    <input class="form-control" id="umd_in1" placeholder="IN1" style="" type="text">
                                </li>
                                <li class="list-group-item" style="padding: 0;">
                                    <input class="form-control" id="umd_in2" placeholder="IN2" style="" type="text">
                                </li>
                            </ul>
                        </div>
                        <div style="">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item" style="padding: 0;">
                                    <input class="form-control" id="umd_in3" placeholder="IN3" style="" type="text">
                                </li>
                                <li class="list-group-item" style="padding: 0;">
                                    <input class="form-control" id="umd_in4" placeholder="IN4" style="" type="text">
                                </li>
                                <li class="list-group-item" style="padding: 0;">
                                    <input class="form-control" id="umd_aux" placeholder="AUX" style="" type="text">
                                </li>
                                <li class="list-group-item" style="padding: 0;">
                                    <input class="form-control" id="umd_pat" placeholder="PAT" style="" type="text">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="invalid-feedback" id="umd-error-message" style="display: flex; margin-left: 20px;">
                    </div>
                    <div style="display: flex; justify-content: center; margin-top: 10px;">
                        <button class="button-100-round" data-locale="module_key_chroma" id="umd-save">
                            SAVE
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-pills justify-content-center" id="tabs" role="tablist"
        style="position: fixed; bottom: 10px; left: 16%; z-index: 999; background-color: var(--item-bg); border-radius: 5px;">
        <li class="nav-item" role="presentation">
            <button aria-controls="layout" aria-selected="true" class="nav-link active" data-target="#layout"
                    data-toggle="tab" id="layout-tab"
                    role="tab" style="color: white;" type="button">Layout
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button aria-controls="media" aria-selected="false" class="nav-link" data-target="#media" data-toggle="tab"
                    id="media-tab"
                    role="tab" style="color: white;" type="button">Media
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button aria-controls="system" aria-selected="false" class="nav-link" data-target="#system"
                    data-toggle="tab"
                    id="system-tab"
                    role="tab" style="color: white;" type="button">System
            </button>
        </li>
    </ul>
</div>

